<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页 - 酒店系统</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        body {
            background-color: #f7f9fc;
        }
        .header {
            text-align: center;
            padding: 50px 0;
            background-color: #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        .header h1 {
            font-size: 2.5rem;
        }
        .header p {
            font-size: 1.2rem;
            color: #666;
        }
        .card {
            border: 1px solid #dcdfe6;
            border-radius: 5px;
            padding: 20px;
            background-color: white;
            margin: 20px 0;
        }
        .hotel-card {
            border: 1px solid #dcdfe6;
            border-radius: 5px;
            padding: 15px;
            background-color: #f9f9f9;
            margin-bottom: 15px;
        }
        footer {
            text-align: center;
            padding: 20px 0;
            background-color: #fff;
            box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
        }

        /* 滚动公告style START */
        .announcement-bar {
            overflow: hidden; /* 隐藏溢出内容 */
            background: #009688; /* 背景颜色 */
            color: white; /* 字体颜色 */
            padding: 21px 0; /* 上下内边距 */
            position: relative; /* 使子元素定位 */
            width: 100%; /* 宽度占满 */
            display: flex; /* 使用 Flexbox */
            align-items: center; /* 垂直居中 */
        }

        .announcement-content {
            white-space: nowrap; /* 防止文本换行 */
            animation: scroll 10s linear infinite; /* 动画效果 */
            position: absolute; /* 绝对定位 */
            right: 0; /* 从右侧开始 */
        }

        @keyframes scroll {
            0% {
                transform: translateX(100%); /* 从右侧开始 */
            }
            100% {
                transform: translateX(-100%); /* 向左侧移动 */
            }
        }
        /* 滚动公告style END */
    </style>
</head>
<body>

<div class="announcement-bar">
    <div class="announcement-content">
        <h4 style="font-size: 16px;">欢迎访问我们的酒店展示网站！所有酒店均可在线预约。</h4>
    </div>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">酒店展示</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">首页 <span class="sr-only">(当前页)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">酒店收藏</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">我的订单</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">个人中心</a>
            </li>
        </ul>
    </div>
</nav>
<div class="container">
    <div class="card">
        <h3>个人信息</h3>
        <p>姓名: 张三</p>
        <p>邮箱: zhangsan@example.com</p>
        <p>联系方式: 123-456-7890</p>
    </div>

    <div class="card">
        <h3>我的酒店预订</h3>
        <div class="row">
            <div class="col-md-6 col-lg-4">
                <div class="hotel-card">
                    <h4>酒店A</h4>
                    <p><i class="bi bi-geo-alt-fill"></i> 地址: 市中心，XX路123号</p>
                    <p>入住日期: 2023-10-01</p>
                    <p>离店日期: 2023-10-05</p>
                    <button class="btn btn-danger" onclick="cancelBooking('酒店A')">取消预订</button>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="hotel-card">
                    <h4>酒店B</h4>
                    <p><i class="bi bi-geo-alt-fill"></i> 地址: XX区，YY路456号</p>
                    <p>入住日期: 2023-10-10</p>
                    <p>离店日期: 2023-10-15</p>
                    <button class="btn btn-danger" onclick="cancelBooking('酒店B')">取消预订</button>
                </div>
            </div>
            <!-- 可以添加更多酒店预订 -->
        </div>
    </div>

    <div class="card">
        <h3>管理操作</h3>
        <button class="btn btn-primary" onclick="window.location.href='index.html'">查找更多酒店</button>
        <button class="btn btn-secondary" onclick="window.location.href='update_info.html'">修改个人信息</button>
    </div>
</div>

<footer>
    <p>&copy; 2023 酒店系统. 版权所有.</p>
</footer>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
    function cancelBooking(hotelName) {
        alert(`您已取消对${hotelName}的预订！`);
    }
</script>

</body>
</html>
